<template>
  <a-space direction="vertical" :size="12" fill>
    <a-space direction="vertical" :size="16" fill>
      <div class="space-unit">
        <sa-top />
      </div>
      <div>
        <a-grid :cols="24" :col-gap="16" :row-gap="16">
          <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 16, xxl: 16 }">
            <sa-center-left />
          </a-grid-item>
          <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 8, xxl: 8 }">
            <sa-center-right />
          </a-grid-item>
        </a-grid>
      </div>
      <div>
        <sa-bottom />
      </div>
    </a-space>
  </a-space>
</template>

<script setup>
import SaTop from './data-analysis/sa-top.vue'
import SaCenterLeft from './data-analysis/sa-center-left.vue'
import SaCenterRight from './data-analysis/sa-center-right.vue'
import SaBottom from './data-analysis/sa-bottom.vue'
</script>

<style scoped lang="less">
.space-unit {
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
</style>
